<template>
  <div class="afterInvestDel-page">
    <pubChunk :mt="20">
      <span slot="title">历史走势图</span>
      <div slot="headLeft">
        <div class="flex wrap">
          <el-date-picker
            style="width: 280px; margin-left: 14px;"
            v-model="chart_date"
            type="daterange"
            align="right"
            unlink-panels
            size="small"
            :clearable="false"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button-group style="margin-left: 14px;">
            <el-button
              size="small"
              :type="dateFreq == 1 ? 'primary' : ''"
              :disabled="defaultDateFreq > 1"
              @click="dateFreq = 1"
            >
              日频
            </el-button>
            <el-button
              size="small"
              :type="dateFreq == 2 ? 'primary' : ''"
              :disabled="defaultDateFreq > 2"
              @click="dateFreq = 2"
            >
              周频
            </el-button>
            <el-button
              size="small"
              :type="dateFreq == 3 ? 'primary' : ''"
              @click="dateFreq = 3"
            >
              月频
            </el-button>
          </el-button-group>
          <el-checkbox
            style="margin-left: 14px;"
            class="flex-v-center"
            v-model="showBeyondIncome"
          >
            显示超额曲线
          </el-checkbox>
        </div>
      </div>
      <chart1Head
        :more_chart1_nav_list2="more_chart1_nav_list2"
        :chartDate.sync="chart_date"
        :oldDate="oldDate"
        @sameSection="sameSectionHandle"
        @sameSectionReal="sameSectionRealHandle"
        :hasReal="Object.keys(realquery).length ? true : false"
      ></chart1Head>
      <Chart1
        v-if="classifyId && indexTypes.length && info.classfyName"
        id="groupManageChart1"
        @viewObj="viewObjHandle"
        :userId="userId"
        :ids="classifyId"
        :lineEcahrts_showAll="lineEcahrts_showAll"
        :realquery="realquery"
        @clearRealquery="(val) => (realquery = val)"
        @beyondIncome2Change="val=>$emit('beyondIncome2Change', val)"
        :id_index="indexTypes"
        :chart_date="chart_date"
        :sameSection="sameSection"
        :sameSectionReal="sameSectionReal"
        :defaultDateFreq.sync="defaultDateFreq"
        :dateFreq.sync="dateFreq"
        :showBeyondIncome="showBeyondIncome"
        :name1="info.classfyName"
        :name2="info.classfyName"
        :indexNames="one_contrastOptions_list_parent"
        typePage="groupManage"
        :height="280"
        width="100%"
      />
      <div v-else style="height: 585px;"></div>
    </pubChunk>
  </div>
</template>
<script>
import { parseTime, deepClone } from '@/utils'
import pubChunk from '@/components/investComn/pubChunk.vue'
import Chart1 from '@/components/Charts/strategyComb/groupManage/chart1.vue'
import chart1Head from '@/components/investComn/chart1Head_v3.vue'
import mixin from './mixins'
export default {
  mixins: [mixin],
  components: {
    pubChunk,
    Chart1,
    chart1Head,
  },
  data() {
    return {
      _chart_date: [],
      chart_date: [],
      oldDate: [],
      more_chart1_nav_list2: [],
      dataFrom: {
        types: [],
      },
      dateFreq: undefined, // 频率
      defaultDateFreq: undefined, // 频率
      sameSectionReal: false,
      sameSection: false,
      realquery: {},
      lineEcahrts_showAll: false,
      info: {},
      showBeyondIncome: false, // 超额收益
      nominalAmount: '',
    }
  },
  props: {
    indexTypes: {
      type: Object | Array,
    },
    chart_date_parent: {
      type: Object | Array,
    },
    one_contrastOptions_list_parent: {
      type: Object | Array,
    },
  },
  watch: {
    chart_date: {
      handler(date, oldDate) {
        if (oldDate.length !== 0) {
          this.$emit('update:chart_date_parent', date)
        }
      },
    },
    indexTypes: {
      handler(newVal, oldDate) {
        this.dataFrom.types = newVal
      },
    },
  },
  methods: {
    chartInit(info) {
      this.info = info
      const dates = []
      dates[0] = parseTime(info.classifyNetWorthBean.startDate)
      dates[1] = info.classifyNetWorthBean.endDate
        ? parseTime(info.classifyNetWorthBean.endDate)
        : parseTime(new Date())
      this.chart_date = dates
      this.oldDate = deepClone(dates)
      let year0 = Number(this.chart_date[0].slice(0, 4))
      const year1 = Number(this.chart_date[1].slice(0, 4))
      this.more_chart1_nav_list2 = []
      while (year0 <= year1) {
        this.more_chart1_nav_list2.push(year0 + '年度')
        year0++
      }
    },

    viewObjHandle(data) {
      this.$emit('viewObjHandle', data)
    },
    sameSectionHandle(val) {
      this.sameSection = val
    },
    sameSectionRealHandle(val) {
      this.sameSectionReal = val
    },
  },
}
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  padding: 0;
}
</style>
